<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 
Inherits="System.Web.Mvc.ViewPage<MvcCms.Web.ViewModels.HomeModel>" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    <%=ViewData["SiteName"]%>
    -
    <%=ViewData["PageTitle"]%>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="HeaderContent" runat="server">
    <link href="/Content/modal/jqModal.css" rel="stylesheet" type="text/css" />
    <meta name="description" content="<%=Model._ContentPage.Description%>" />
    <meta http-equiv="X-XRDS-Location" content="http://<%=ViewData["SiteURL"] %>/xrds.aspx"/>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="SidebarContent" runat="server"> 
</asp:Content>
<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
    <%if (Roles.IsUserInRole("Editor"))
      {%>
    <div>
        <a href="/backoffice/editcontentpage/<%=Model._ContentPage.ContentPageID %>">
            <img alt="cmseditor" border="0" src="/content/images/UEB16.png" /></a>
    </div>
    <%} %>
    <div>
        <div>
            <div class="spacer_top">
            <%if (Model._ContentPage.ShowContributorLink){ %>
            <table width="100%"><tr><td align="right">Contributor: <%=Model._ContentPage.Contributor.UserName.ToProfileLink()%></td></tr></table>
            <%} %>
            </div>
            <div id="thecontent" class="thecontent">
                <%=ViewData["PageContent"]%>
            </div>
            <div class="spacer">
            </div>
        </div>
        <div id="languages" class="languages">
            <div class="isloading-container">
                <div id="altlangisloading" class="altlangisloading">
                </div>
            </div>
            <%Html.RenderPartial("ControlsHome/AltLanguageVersions", Model._AltLangueVersions); %>
        </div>
    </div>
    <div class="comments-outerdiv">
        <% if (Model._ContentPage.CommentsEnabled || Model._ContentPage.AnonCommentsEnabled)
           { 
                //lets break this out into a control
        %>
                <table border="0" cellpadding="0" cellspacing="0" width="100%">
            <tr>
                <td>
                    <div id="round_me4" class="comments-area">
                        <div id="article-comments" class="comment">
                        </div>
                        <h3>
                            Comments</h3>
                            <div class="mvccmsnotify">
                        <img class="ajaximage" title="refresh comments" src="/content/images/refresh.png" onclick="GetComments(<%=Model._ContentPage.ContentPageID %>)"
                            alt="refreshcmnts" /><div id="isloading" class="isloading">
                            </div>
                            </div>
                        <% Html.RenderPartial("ControlsHome/CommentItems"); %>
                        <input type="hidden" id="ContentPageID" name="ContentPageID" value="<%= Model._ContentPage.ContentPageID %>" />
                        <input type="hidden" id="commentId" name="commentId" value="" />
                    </div>
                    <div>
                        <%if (Context.User.Identity.IsAuthenticated == false && Model._ContentPage.AnonCommentsEnabled)
                          {%>
                        <label for="name">
                            Name</label>
                        <%= Html.TextBox("AddedByAnonName", null, new { @maxlength = 256 })%>
                        <label for="email">
                            E-Mail</label>
                        <%= Html.TextBox("AddedByAnonEmail", null, new { @maxlength = 256 })%>
                        <span class="xxsmall">(gravatar only)</span>
                        <%}
                          if (Context.User.Identity.IsAuthenticated == true && (Model._ContentPage.AnonCommentsEnabled || Model._ContentPage.CommentsEnabled))
                          {%>
                        <%=Html.Hidden("AddedByAnonEmail", "LoggedIn")%>
                        <%=Html.Hidden("AddedByAnonName", ViewData["userguid"])%>
                        <%}
                          //if comments are enabled and the user is logged in or anon comments are enabled
                          if ((Context.User.Identity.IsAuthenticated == true && Model._ContentPage.CommentsEnabled) || Model._ContentPage.AnonCommentsEnabled)
                          {%>
                        <label for="body">
                            Your Comment</label>
                        <div>
                            <textarea id="body" class="commentbox"></textarea></div>
                        <div>
                            <button type="submit" id="comment-create-button" onclick="javascript: CreateComment()">
                                Add Comment</button></div>
                        <div id="saveStatus">
                        </div>
                        <%
    
                            }
                          else
                          {
                              if (Context.User.Identity.IsAuthenticated == false && Model._ContentPage.CommentsEnabled)
                              {%>
                        <h6>
                            You must be
                            <%= Html.ActionLink("Loged On", "LogOn", "Account") %>
                            to make a comment.</h6>
                        <%}
                          }       
                        %>
                    </div>
                </td>
            </tr>
        </table>
        <% 
           } 
        %>
    </div>
    <div id="comment-editPH" class="jqmDialog">
        <div class="jqmdTL">
            <div class="jqmdTR">
                <div class="jqmdTC jqDrag">
                    Edit Comment</div>
            </div>
        </div>
        <div class="jqmdBL">
            <div class="jqmdBR">
                <div class="jqmdBC">
                    <div class="jqmdMSG">
                        <div class="jqmAlertContent">
                            <p>
                                Please wait...
                                <img src="/content/images/busy.gif" alt="loading" /></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input type="image" src="/content/modal/dialog/close.gif" class="jqmdX jqmClose" />
    </div>
    <div id="comment-replyPH" class="jqmDialog">
        <div class="jqmdTL">
            <div class="jqmdTR">
                <div class="jqmdTC jqDrag">
                    Reply To Comment</div>
            </div>
        </div>
        <div class="jqmdBL">
            <div class="jqmdBR">
                <div class="jqmdBC">
                    <div class="jqmdMSG">
                        <div class="jqmAlertContent">
                            <p>
                                Please wait...
                                <img src="/content/images/busy.gif" alt="loading" /></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input type="image" src="/content/modal/dialog/close.gif" class="jqmdX jqmClose" />
    </div>
    <%=Html.Hidden("moduleholder", "")%>
    <%=Html.Hidden("defaultLanguageId", ViewData["DefaultLangID"])%>
    <%=Html.Hidden("SiteName", ViewData["SiteName"])%>
    <%=Html.Hidden("currentPageId", Model._ContentPage.ContentPageID)%>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ScriptContent" runat="server">
    <script src="/Scripts/jqModal.js" type="text/javascript"></script>
    <script type="text/javascript">  
        GetComments(<%=Model._ContentPage.ContentPageID %>);
        <%        
            if (Request.Browser.Browser == "IE")
            {
                if (Request.Browser.MajorVersion > 6){%>
                    LoadModules(<%=Model._ContentPage.ContentPageID%>);
              <%}        
            }  
            else{%>
                LoadModules(<%=Model._ContentPage.ContentPageID%>);
          <%}      
        %> 
        $("#altlangisloading").hide();
        function CreateComment() {
            var data = { AddedByAnonName: $('#AddedByAnonName').val(), AddedByAnonEmail: $('#AddedByAnonEmail').val(), Body: $('#body').val() }
            var encoded = JSON.stringify(data);   
            var now = new Date();         
		    $.post(
			    "/mvccmsAjax/CreateContentComment/" + now.getMilliseconds(),
			    { data: encoded, pageId: <%=Model._ContentPage.ContentPageID %> },
			    function (data) {
				    if (data.error){
				        alert(data.error);
				    }
				    else{
				        $("#comments tbody").html("");
				        PopulateComments(data);
				        $('#body').val("");
				    }
			    },
			    "json"
		    );            
            
        }
        
        function GetComments(pageId) {
        $("#isloading").show();
        var now = new Date();
		    $.post(
			    "/mvccmsAjax/GetContentComments/" + now.getMilliseconds(),
			    { pageId: <%=Model._ContentPage.ContentPageID %> },
			    function (data) {
				    if (data.error){
				        //alert(data.error);
				    }
				    else{
				        $("#comments tbody").html("");
				        PopulateComments(data);
				        $("#isloading").hide();
				    }
			    },
			    "json"
		    ); 
        }
 
 
         $().ready(function() {
          $('#comment-editPH').jqm({          
            ajax: '/mvccmsModal/EditComment/12/4',          
            target: 'div.jqmAlertContent',
            overlay: 30, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
            overlayClass: 'whiteOverlay'})
            .jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */
            
          $('#comment-replyPH').jqm({          
            ajax: '/mvccmsModal/CommentReply/12/4',          
            target: 'div.jqmAlertContent',
            overlay: 30, /* 0-100 (int) : 0 is off/transparent, 100 is opaque */
            overlayClass: 'whiteOverlay'})
            .jqDrag('.jqDrag'); /* make dialog draggable, assign handle to title */            
          
          // Close Button Highlighting. IE doesn't support :hover. Surprise?
          $('input.jqmdX')
          .hover(
            function(){ $(this).addClass('jqmdXFocus'); }, 
            function(){ $(this).removeClass('jqmdXFocus'); })
          .focus( 
            function(){ this.hideFocus=true; $(this).addClass('jqmdXFocus'); })
          .blur( 
            function(){ $(this).removeClass('jqmdXFocus'); });

        });         
        
        function OpenCommentModal(commentId)
        {
            var now = new Date();  
            //update parameters          
            $('#comment-editPH').jqm({
                ajax: '/mvccmsModal/EditComment/'+commentId+'/'+now.getMilliseconds()
            });
            //open modal
            $('#comment-editPH').jqmShow();
        }                   
        function InsertReply(commentId)
        {
            var now = new Date();  
            //update parameters          
            $('#comment-replyPH').jqm({
                ajax: '/mvccmsModal/CommentReply/'+commentId+'/'+now.getMilliseconds()
            });
            //open modal
            $('#comment-replyPH').jqmShow();            
        }
        function CommentReply()
        {
            var now = new Date();  
            var data = { CommentID: $('#parent-commentid').val(), AddedByAnonName: $('#AddedByAnonName').val(), Body: $('#Reply-Body').val() }
            var encoded = JSON.stringify(data);            
		    $.post(
			    "/mvccmsAjax/PostCommentReply/"+now.getMilliseconds(),
			    { data: encoded, pageId: <%=Model._ContentPage.ContentPageID %> },
			    function (data) {
				    if (data.error){
				        alert(data.error);
				    }
				    else{
				        $("#comments tbody").html("");
				        PopulateComments(data);
				        $('#comment-replyPH').jqmHide();
				    }
			    },
			    "json"
		    );             
        }
        function EditComment() {
            var data = { CommentID: $('#commentid').val(), AddedByIP: $('#AddedByIP').val(), Body: $('#Body').val(), AddedByAnonName: $('#AddedByAnonName').val(), Approved: $("#Approved:checked").val() }
            var now = new Date();  
            var encoded = JSON.stringify(data); 
            
		    $.post(
			    "/mvccmsAjax/UpdateComment/"+now.getMilliseconds(),
			    { data: encoded },
			    function (data) {
				    if (data.error){
				        alert(data.error);
				    }
				    else{
				        $("#comments tbody").html("");
				        PopulateComments(data);
				        $('#comment-editPH').jqmHide();
				    }
			    },
			    "json"
		    );            
        }        

        function PopulateComments(data){            
		    $.each(data, function(i,comment){
		        var displaydate = comment.ElapsedTime + " ago";
		        var header, headername, gravatar="";
		        if (comment.AddedByAnonEmail!=null){
		            gravatar = "<img src='"+comment.AddedByAnonEmail+"'>";
		        }
		        if (comment.UserName == "anonymous"){
		            if (comment.AddedByAnonName==""){
		                comment.AddedByAnonName="anonymous";
		            }
		            header = "<td><div class='comment-header'>Posted by <span class='name'>"+comment.AddedByAnonName+"</span> "+gravatar+" "+displaydate;
		        }
		        else{
		            header = "<td><div class='comment-header'>Posted by <span class='name'>"+comment.UserName+"</span> "+gravatar+" "+displaydate;
		        }
		        
			    var tblRow =
				    "<tr>"				    
				    +header
				    <%if (Roles.IsUserInRole("Editor")){%>
				    +"&nbsp;&nbsp;<a class='ec"+comment.CommentID+"' href='javascript:void(0);' onclick='OpenCommentModal("+comment.CommentID+")'><span class='xxsmall'>Edit</span></a>"
				    <%}%>
				    <%if (Roles.IsUserInRole("User")){%>
				    +"&nbsp;&nbsp;<a class='r2c"+comment.CommentID+"' href='javascript:void(0);' onclick='InsertReply("+comment.CommentID+")'><span class='xxsmall'>Reply</span></a>"
				    <%}%>				    
				    +"</div></td>"
				    +"</div></tr>"
			    $(tblRow).appendTo("#comments tbody");
			    var tblRow2 =
				    "<tr>"
				    +"<td><div><blockquote class='body'>"+comment.Body+"</blockquote></div></td>"
				    +"</tr>"
			    $(tblRow2).appendTo("#comments tbody");	
			    
                $.each(comment.Replies, function(i, reply) {
                    PopulateReply(reply, 1);  
                    $.each(reply.Replies, function(i, reply2) {
                        PopulateReply(reply2, 2);
                        $.each(reply2.Replies, function(i, reply3) {
                            PopulateReply(reply3, 3);                            
                            $.each(reply3.Replies, function(i, reply4) {
                                PopulateReply(reply4, 4);
                            });                            
                        });                        
                    });			    		                                          
                });			    		                    
		    });
        }      
        function PopulateReply(reply, depth){
            var gravatar = "<img src='"+reply.AddedByAnonEmail+"'>";
            var displaydate = reply.ElapsedTime + " ago";          
            var tblRow = "<tr><td align='right'>";
            tblRow +="<div class='commentreply-container' style='width:"+(700-(depth*20))+"px'>";
            tblRow += "<div class='comment-header'>Reply by <span class='name'>"+reply.UserName+"</span> "+gravatar+" "+displaydate;
            
            <%if (Roles.IsUserInRole("Editor")){%>
            tblRow += "&nbsp;&nbsp;<a class='ec"+reply.CommentID+"' href='javascript:void(0);' onclick='OpenCommentModal("+reply.CommentID+")'><span class='xxsmall'>Edit</span></a>";
            <%}%>	
            if (depth <4){
		    <%if (Roles.IsUserInRole("User")){%>
		    tblRow += "&nbsp;&nbsp;<a class='r2c"+reply.CommentID+"' href='javascript:void(0);' onclick='InsertReply("+reply.CommentID+")'><span class='xxsmall'>Reply</span></a>";
		    <%}%>        
		    }
            tblRow += "</div><div><blockquote class='body'>"+reply.Body+"</blockquote></div>";
            tblRow +="</div>";            
            tblRow += "</td></tr>";
            $(tblRow).appendTo("#comments tbody");        
        }
        function PopulateComment(data){        
            var comment = data;
	        var postdate = jsonParseDate(comment.AddedDate); 
	        var displaydate = getCalendarDate(postdate) + " " + getClockTime(postdate);
		    var tblRow =
			    "<tr>"
			    +"<td><div class='comment-header'>Comment posted by <span class='name'>"+comment.UserName+"</span> "+displaydate+"</div></td>"
			    +"</tr>"
		    $(tblRow).appendTo("#comments tbody");
		    var tblRow2 =
			    "<tr>"
			    +"<td><blockquote class='body'>"+comment.Body+"</blockquote></td>"
			    +"</tr>"
		    $(tblRow2).appendTo("#comments tbody");
        }  
        function PopulateCommentReply(data){        
            var comment = data;
	        var postdate = jsonParseDate(comment.AddedDate); 
	        var displaydate = getCalendarDate(postdate) + " " + getClockTime(postdate);
		    var divreply = "<tr><td><div class='comment-header'>Reply posted by <span class='name'>"+comment.UserName+"</span> "+displaydate+"</div>";
		    divreply+="<blockquote class='body'>"+comment.Body+"</blockquote></td></tr>";
		    $(divreply).appendTo("#cmnt-"+comment.ParentCommentID+ " tbody");
        }               
    </script>

</asp:Content>
